<template>
  <i-upload :name="'files'" :action="uploadUrl || '/'" :default-file-list="uploadedFiles" multiple :format="formats" :on-success="uploaded" :on-remove="removed" :on-preview="preview">
    <i-button type="ghost" icon="ios-cloud-upload-outline">{{text}}</i-button>
  </i-upload>
</template>

<script>
import { mapGetters } from 'vuex'
import util from '../../../libs/util'
export default {
  props: {
    text: {
      type: String,
      default: '上传文件'
    },
    files: {
      type: Array
    },
    type: {
      type: Number
    }
  },
  data() {
    return {
      formats: [],
      uploadedFiles: []
    }
  },
  computed: {
    ...mapGetters({
      uploadUrl: 'uploadUrl'
    })
  },
  watch: {
    uploadedFiles(val) {
      this.$emit('update:files', this.uploadedFiles)
    },
    type(val) {
      // console.log(val)
    }
  },
  mounted() {
    switch (this.type) {
      case 0:
        this.formats = util
          .getVideoExtensions()
          .concat(util.getOfficeDocumentExtensions())
        break
    }
    // console.log(this.uploadUrl)
  },
  methods: {
    removed(file, fileList) {
      var index = this.uploadedFiles.findIndex(item => item.uid === file.uid)
      if (index !== -1) this.uploadedFiles.splice(index, 1)
    },
    uploaded(res, file) {
      // console.log(file)
      var extension = file.name.split('.').pop()
      var type = util.contentType(extension)
      this.uploadedFiles.push({
        name: file.name,
        type: type,
        path: file.response[0],
        uid: file.uid
      })
    },
    setDefaultFiles(files) {
      this.uploadedFiles = files || []
    },
    preview(file) {
      // console.log(file)
      // window.open(file.path)
      // console.log(file)
    }
  }
}
</script>

<style>
</style>
